<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页换肤 编辑页面</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <jsp:include page="../com/header.jsp"></jsp:include>
    <script type="text/javascript" src="../../js/comm/editcomm.js"></script>
    <script type="text/javascript">
        $(function () {
            getDataById(root + 'cms/homeSkin/findHomeSkinById', "#homeSkinTmpl", "#homeSkinContent");
            $("#saveOrupdate").click(function () {
                saveData(root + 'cms/homeSkin/saveHomeSkin', 'homeSkinList.jsp');
            });
            //上传图片
            $('#homeSkinContent').on('click','#uploadPhotoFile', function () {
                upload("homeSkin");
            });
            $('#homeSkinContent').on('click','#uploadPhotoFile1', function () {
                upload("homeSkin");
            });
        });

        function getDataById(url, tmpl, content) {
            var tId = getUrlParam("id");
            if (!tId) {
                myAlert('id参数不能为空');
                return;
            }
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: {
                    modelId: tId
                },
                success: function (data) {
                    console.log(data);
                    if (data.code == 1) {
                        var contentHtml = $(tmpl).render(data.object, {
                            mydata: data
                        });
                        $(content).html(contentHtml);
                    } else {
                        var contentHtml = $(tmpl).render("");
                        $(content).html(contentHtml);
                    }

                    //颜色选择控件
                    $('#bgColorBtn').colorpicker({
                        showon:'both'
                    })
                        .on('change.color', function(evt, color){
                            $('#bgColorBtn').next().css('background-color',color);
                        });

                    $('#fontColorBtn').colorpicker({
                        showon:'both'
                    })
                        .on('change.color', function(evt, color){
                            $('#fontColorBtn').next().css('background-color',color);
                        });
                }
            });
        }


    </script>
</head>
<body>
<section>
    <div>
        <div class="col-xs-12">
            <div class="box" style="height:900px">
                <div class="box-header">
                    <br>
                    <input type="button" value="确定" id="saveOrupdate" class="btn btn-success">
                    <input type="button" value="返回" onclick="backAction('homeSkinList.jsp');" class="btn btn-info"/>
                </div>
                <form id="submit_form" class="form-horizontal">
                    <div class="tab" id="homeSkinContent">
                    </div>
                </form>
            </div>
        </div>
</section>
<script type="text/x-jsrender" id="homeSkinTmpl">
			<fieldset> 
				<input type="hidden" id="tId" name="id" value="{{:id}}" />
	        	{{!--<div class="form-group">
        			<label class="col-md-2 control-label controls" for="formGroupInputSmall">图片：</label>
       				 <div class="col-md-3">
						<div class="upload_div">
                        	<img id="myImageShow" src="../../{{:imgUrl}}" width="100px" height="100px" />
                        	<input type="hidden" id="imgUrl" name="imgUrl" value="{{:imgUrl}}"/>
                        	<input type="file" id="uploadPhotoFile" name="photoFile" class="upload_file">
                        </div>
					</div>
      			</div>--}}
				<div class="form-group">
        			<label class="col-md-2 control-label controls" for="formGroupInputSmall">首页模块名称：</label>
       				 <div class="col-md-3">
						<input type="text" disabled placeholder="请填写首页模块名称" class="form-control input-sm" data-rule="required;length[0~50]" id="moduleName" name="moduleName" value="{{:moduleName}}" />
					</div>
      			</div>
				<div class="form-group">
        			<label class="col-md-2 control-label controls" for="formGroupInputSmall">背景图片地址：</label>
       				 <div class="col-md-3">
                         <div class="upload_div">
                                <img id="myImageShow" {{if bgImgPath}}<img src="../../{{:bgImgPath}}" height="100px" width="100px">{{else}}<img src="" height="100px" width="100px">{{/if}} />
                                <input type="hidden" id="imgUrl" name="bgImgPath" value="{{:bgImgPath}}"/>
                                <input type="file" id="uploadPhotoFile" name="photoFile" class="upload_file">
                            </div>
                        </div>
					</div>
      			</div>
				<div class="form-group">
        			<label class="col-md-2 control-label controls" for="formGroupInputSmall">背景颜色：</label>
       				 <div class="col-md-3" id="bgColorDiv">
                        <input id="bgColorBtn" class="colorPicker" placeholder="请填写背景颜色" data-rule="required;length[0~50]" id="bgColor" name="bgColor" value="{{:bgColor}}"/>
					</div>
      			</div>
				<div class="form-group">
        			<label class="col-md-2 control-label controls" for="formGroupInputSmall">中间小图标：</label>
       				 <div class="col-md-3">
       				  <div class="upload_div">
                                <img id="myImageShow1" {{if centerIcon}}<img src="../../{{:centerIcon}}" height="100px" width="100px">{{else}}<img src="" height="100px" width="100px">{{/if}} />
                                <input type="hidden" id="imgUrl1" name="centerIcon" value="{{:centerIcon}}"/>
                                <input type="file" id="uploadPhotoFile1" name="photoFile" class="upload_file">
                       </div>
					</div>
      			</div>
				<div class="form-group">
        			<label class="col-md-2 control-label controls" for="formGroupInputSmall">模块app显示的名称：</label>
       				 <div class="col-md-3">
						<input type="text" placeholder="请填写模块app显示的名称" class="form-control input-sm" data-rule="required;length[0~50]" id="appDisplayName" name="appDisplayName" value="{{:appDisplayName}}" />
					</div>
      			</div>
				<div class="form-group">
        			<label class="col-md-2 control-label controls" for="formGroupInputSmall">字体颜色：</label>
       				 <div class="col-md-3" id="fontColorDiv">
       				  <input id="fontColorBtn" class="colorPicker" placeholder="请填写字体颜色" data-rule="required;length[0~50]" id="fontColor" name="fontColor" value="{{:fontColor}}"/>
					</div>
      			</div>
			</fieldset>



</script>
</body>
</html>